<template>
  <div class="chat-sidebar" :class="{ 'sidebar-open': isOpen }">
    <div class="sidebar-header">
      <h3>对话助手</h3>
      <a-button type="link" icon="close" @click="$emit('close')" />
    </div>

    <!-- 新对话按钮 -->
    <div class="new-chat-btn">
      <a-button type="primary" block icon="plus" @click="createNewChat">
        新对话
      </a-button>
    </div>

    <!-- Tab页签 -->
    <a-tabs class="sidebar-tabs" v-model="activeTab">
      <a-tab-pane key="history" tab="对话历史">
        <div class="list-container">
          <div v-for="(chat, index) in chatHistory" :key="chat.projectId" class="chat-list-item">
            <div class="chat-info" @click="switchChat(chat)">
              <div class="chat-avatar">
                <a-icon :type="chat.icon" />
              </div>
              <div class="chat-content">
                <div class="chat-title">{{ chat.name }}</div>
                <div class="chat-desc">{{ chat.title }}</div>
              </div>
            </div>
            <a-button type="link" icon="delete" class="delete-btn" @click.stop="deleteChat(chat.id)" />
          </div>
        </div>
      </a-tab-pane>

      <a-tab-pane key="assistants" tab="我的项目">
        <div class="list-container assistants-container">
          <div v-for="item in myProjectInstanceList" :key="item.id" class="assistant-item" @click="selectAssistant(item)">
            <div class="assistant-icon">
              <a-icon :type="item.icon" />
            </div>
            <div class="assistant-content">
              <div class="assistant-title">{{ item.name }}</div>
              <div class="assistant-desc">{{ item.description }}</div>
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { Button, Icon, Tabs } from "ant-design-vue";
import { queryConversationList, deleteConversation } from "@/api/conversation";
import { queryMyProjectInstanceList } from "@/api/projectInstance";
export default {
  name: "ChatSidebar",
  components: {
    "a-button": Button,
    "a-icon": Icon,
    "a-tabs": Tabs,
    "a-tab-pane": Tabs.TabPane,
  },
  props: {
    isOpen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeTab: "history",
      chatHistory: [],
      myProjectInstanceList: [
        // {
        //   id: 1,
        //   name: "DS批量提取改写",
        //   icon: "edit",
        //   description:
        //     "deepseek批量提取改写，改写文案，提供高质量的内容优化建议",
        // },
        // {
        //   id: 2,
        //   name: "二次原创文案",
        //   icon: "file-text",
        //   description:
        //     "发布针对性语境，进行原文案分析，转字理解，标记重点，文案改写",
        // },
        // {
        //   id: 3,
        //   name: "AI超级编导",
        //   icon: "video-camera",
        //   description: "帮你做导演定位和内容规划，提供视频分析和内容创作建议",
        // },
        // {
        //   id: 4,
        //   name: "封面标题专家",
        //   icon: "picture",
        //   description: "帮你生成吸引人的标题和封面设计建议，提升内容点击率",
        // },
        // {
        //   id: 5,
        //   name: "AI朋友圈",
        //   icon: "wechat",
        //   description: "生成朋友圈文案和图片创意，打造个性化社交内容",
        // },
      ],
    };
  },
  created() {
    queryConversationList().then((res) => {
      this.chatHistory = res.data.data;
    });

    queryMyProjectInstanceList({
      realmName: window.location.origin,
      category: null,
      projectType: null,
      source: '用户',
    }).then((res) => {
      this.myProjectInstanceList = res.data.data;
    });
  },
  methods: {
    createNewChat() {
      const newChat = {
        id: Date.now(),
        title: "新对话",
      };
      this.chatHistory.unshift(newChat);
      this.$emit("select-chat", newChat);
    },
    switchChat(chat) {
      this.$emit("select-chat", chat);
    },
    deleteChat(id) {
      deleteConversation({
        id: id,
      }).then((res) => {
        if (res.code === 200) {
          this.chatHistory.splice(index, 1);
        } else {
          message.error(res.msg);
        }
      });
    },
    selectAssistant(assistant) {
      const newChat = {
        id: Date.now(),
        title: `与 ${assistant.name} 的对话`,
        description: assistant.description,
        assistantId: assistant.id,
      };
      this.chatHistory.unshift(newChat);
      this.$emit("select-chat", newChat);
      this.activeTab = "history";
    },
  },
};
</script>

<style lang="less" scoped>
.chat-sidebar {
  position: fixed;
  left: -300px;
  top: 0;
  bottom: 0;
  width: 300px;
  background: #fff;
  border-right: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;

  &.sidebar-open {
    left: 0;
  }

  .sidebar-header {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;

    h3 {
      margin: 0;
      font-size: 16px;
      color: #333;
    }
  }

  .new-chat-btn {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;

    .ant-btn {
      height: 40px;
      font-size: 14px;
    }
  }

  .sidebar-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;

    :deep(.ant-tabs-bar) {
      margin: 0;
      border-bottom: 1px solid #f0f0f0;
    }

    :deep(.ant-tabs-content) {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    :deep(.ant-tabs-tabpane) {
      height: 100%;
      overflow-y: auto;
      padding: 8px;
    }
  }

  .list-container {
    height: 100%;
    overflow-y: auto;
    padding: 8px;

    &.assistants-container {
      padding: 12px;
    }
  }

  .chat-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 8px;
    border: 1px solid #f0f0f0;

    &:hover {
      background: #f5f7fa;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .chat-info {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }

    .chat-avatar {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: #e6f7ff;
      display: flex;
      align-items: center;
      justify-content: center;

      .anticon {
        font-size: 20px;
        color: #1890ff;
      }
    }

    .chat-content {
      flex: 1;
      min-width: 0;
      padding-right: 8px;

      .chat-title {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .chat-desc {
        font-size: 12px;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .delete-btn {
      padding: 4px;
      height: auto;
      color: #ff4d4f;
      opacity: 1;
      margin-top: -4px;

      &:hover {
        color: #ff7875;
        background: rgba(255, 77, 79, 0.1);
      }
    }
  }

  .assistant-item {
    background: #fff;
    border: 1px solid #f0f0f0;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      background: #f5f7fa;
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .assistant-icon {
      width: 40px;
      height: 40px;
      background: #e6f7ff;
      border-radius: 8px;

      .anticon {
        font-size: 20px;
        color: #1890ff;
      }
    }

    .assistant-content {
      .assistant-title {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 6px;
      }

      .assistant-desc {
        font-size: 13px;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .chat-sidebar {
    width: 80%;
    left: -80%;
  }
}
</style>
